<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container >
      <a-form :form="form" slot="detail">

        <a-row>

          <a-row :style="styleObj">
            <!-- <a-card title="内容详情"> -->
            <a-col :span="12">
              <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="xgnr" v-decorator="['titlesummary']" placeholder="请输入标题"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="xgnr"
                  type="radio"
                  v-decorator="['proname']"
                  :trigger-change="true"
                  dictCode="proname"
                  placeholder=""
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="问题类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="xgnr"
                  type="radio"
                  v-decorator="['questiontype']"
                  :trigger-change="true"
                  dictCode="task_type"
                  placeholder="请选择问题类型"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="需求类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="xgnr"
                  type="radio"
                  v-decorator="['needtype']"
                  :trigger-change="true"
                  dictCode="task_xq_type"
                  placeholder="请选择需求类型"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="紧急程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="xgnr"
                  type="radio"
                  v-decorator="['priority']"
                  :trigger-change="true"
                  dictCode="jjcd"
                  placeholder="请选择紧急程度"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="xgnr"
                  type="checkbox"
                  v-decorator="['project']"
                  :trigger-change="true"
                  dictCode="module"
                  placeholder="请选择问题所属项目"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响范围" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  :disabled="xgnr"
                  v-decorator="['influenceregion']"
                  placeholder="请输入影响范围,多个地区请用逗号分割"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="影响行业" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-multi-select-tag
                  :disabled="xgnr"
                  type="list_multi"
                  v-decorator="['influenceindustry']"
                  :trigger-change="true"
                  dictCode="industry"
                  placeholder="请选择影响行业"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input :disabled="xgnr" v-decorator="['fkuser']" placeholder="请输入反馈人"></a-input>
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="反馈人身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-dict-select-tag
                  :disabled="xgnr"
                  type="list"
                  v-decorator="['fkusersf']"
                  :trigger-change="true"
                  dictCode="fkr_sf"
                  placeholder="请选择反馈人身份"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="截止时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date
                  :disabled="xgnr"
                  placeholder="请选择截止时间"
                  v-decorator="['endtime']"
                  :trigger-change="true"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-upload :disabled="xgnr" v-decorator="['fileguid']" :trigger-change="true"></j-upload>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item label="问题详细内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-editor :disabled="xgnr" v-decorator="['questioncontent', { trigger: 'input' }]"/>
              </a-form-item>
            </a-col>
            <!-- </a-card> -->

            <!-- <a-card title="审批"> -->
            <a-col :span="12">
              <a-form-item label="审批结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group :disabled="isdistrue" v-decorator="['audit_shbj', {'initialValue': 1 }]" @change="thyjshow">
                  <a-radio value="1"> 通过</a-radio>
                  <a-radio value="2"> 退回</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="issfcfa">
              <a-form-item label="是否出方案" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group :disabled="isdistrue" v-decorator="['sfcfabj', {'initialValue': 1 }]" @change="changefabj">
                  <a-radio value="1"> 是</a-radio>
                  <a-radio value="2"> 否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="issfcfa">
              <a-form-item label="Jira同步" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group :disabled="isdistrue" v-decorator="['sftbjirabj', {'initialValue': 1 }]">
                  <a-radio value="1"> 是</a-radio>
                  <a-radio value="2"> 否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col v-if="ishows == false" :span="24">
              <a-form-item label="退回意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea :disabled="isdistrue" v-decorator="['audit_auditoption']"></a-textarea>
              </a-form-item>
            </a-col>

            <a-col :span="12" v-if="issfcfa">
              <a-form-item label="选择负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-popup
                  :disabled="isdistrue"
                  :multi="true"
                  v-decorator="['realname']"
                  :trigger-change="true"
                  org-fields="realname"
                  dest-fields="realname"
                  code="fzrquery"
                  @callback="popupCallback"
                />
              </a-form-item>
            </a-col>

            <a-col v-if="ishows == true" :span="24">
              <a-form-item label="审批意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea :disabled="isdistrue" v-decorator="['spyijian']"></a-textarea>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-switch
                checked-children="查看问题内容"
                un-checked-children="修改问题内容"
                default-checked
                @click="sfxg"
              />
            </a-col>
            <!-- </a-card> -->
            <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
              <a-button @click="submitForm">提 交</a-button>
            </a-col>
          </a-row>

          <a-timeline v-if="iscklc" :style="pcphonefloatwidth" >
            <a-timeline-item v-for="todo in todos">
              <a-icon slot="dot" :type="jdjpg" style="font-size: 16px"/>
              <a-divider type="vertical" />
              <div v-for="tod in todo">

                <div v-for="to in tod" >
                  <a-tooltip >
                    <template slot="title" v-if="to.spyijian!='undefined'&& to.spyijian!=null">
                      审核意见：{{ to.spyijian }}
                    </template>
                    <div>
                      {{ to.nodename }} -- <span style="color: #374cc2" v-if="to.isnew == 2">
                        <a-tag color="green">已审批</a-tag>
                      </span
                      ><span style="color: #374cc2" v-if="to.isnew == 0"><a-tag color="">未开始</a-tag></span>
                      <span style="color: #c2a943" v-if="to.isnew == 1"><a-tag color="blue">待审批</a-tag></span>
                    </div>

                    <p v-if="to.isnew == '2'">审核时间：{{ to.audittime }}</p>
                    <p>审核类型：{{ to.auditrange }}</p>
                    <!--  <p>审核子类型：{{ to.audittype }}</p> -->
                    <p>审核人员：{{ to.auditusername }}</p>
                    <span v-if="to.isnew == '2'">
                      <p v-if="to.shbj == 1">审核进度：
                        <a-tag color="#87d068">通过</a-tag>
                      </p>
                      <p v-if="to.shbj == 2">审核进度：
                        <a-tag color="#f50">退回</a-tag>
                      </p>
                      <p v-if="to.shbj == 2">退回原因：{{ to.auditoption }}</p>
                    </span>
                    <span v-if="to.isnew == '1'">
                      <p v-if="to.shbj == 0">审核进度：
                        <a-tag color="#ffd591">待审核</a-tag>
                      </p>
                    </span>
                    <a-divider/>

                  </a-tooltip>
                </div>

              </div>

              <!-- <img src="../../../assets/jiantou.png" style="float: left;" /> -->

            </a-timeline-item>
          </a-timeline>

        </a-row>
      </a-form>
    </j-form-container>
  </a-spin
  >
</template>

<script>
import { httpAction, getAction, putAction } from '@/api/manage'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JUpload from '@/components/jeecg/JUpload'
import JDate from '@/components/jeecg/JDate'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import JEditor from '@/components/jeecg/JEditor'
import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  name: 'TtQuestionSpForm',
  components: {
    JFormContainer,
    JUpload,
    JDate,
    JDictSelectTag,
    JMultiSelectTag,
    JEditor
  },

  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {
      },
      required: false
    },
    // 表单模式：true流程表单 false普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      isdistrue: false,
      xgnr: true,
      mrxz: '1',

       // 流程图参数

       pcphonefloat: '',
       pcfloatwidth: {
        float: 'right',
        width: '18%'
       },
       phonefloatwidth: {
        float: 'top'
       },
       styleObj2: {
         width: '82%',
         float: 'left'
       },
       styleObj: {},
       styleObj1: {
         width: '100%'

       },

        todos: [],
        jdjpg: 'down-circle',
        draweris: false,
        iscklc: false,
        issfcfa: '',

      isdis: true,
      ishows: true,
      form: this.$form.createForm(this),
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      validatorRules: {},
      url: {
        add: '/tt_question_collect/ttQuestionCollect/add',
        edit: '/tt_question_collect/ttQuestionCollect/edit',
        editspjm: '/tt_question_collect/ttQuestionCollect/editspjm',
        queryById: '/tt_question_collect/ttQuestionCollect/queryById',
        questionsh: '/tt_question_collect/ttQuestionCollect/questionsh',
         flowcodelist: '/tt_question_collect/ttCollectFlowNode/list',
         seeendspr: '/tt_question_collect/ttAuditRecord/seeendspr',
         editsfcjfa: '/tt_question_collect/ttQuestionCollect/editsfcjfa'
      }
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    disabledDate(current) {
      return current && current <= moment().endOf('day') - 24 * 60 * 60 * 1000
    },
    sfxg() {
      this.xgnr = !this.xgnr
    },

    changefabj(val) {
      console.log(val)
    },

    // 判断手机端还是pc端
     IsPC() {
      var userAgentInfo = navigator.userAgent
      console.log('userAgentInfo', userAgentInfo)
      var Agents = ['Android', 'iPhone',
            'SymbianOS', 'Windows Phone',
            'iPad', 'iPod']
      var flag = true
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false
          break
        }
      }
      // false 为手机端打开，ture为pc端打开
      console.log('flag', flag)
      // return flag
      if (flag == false) {
        console.log('手机端打开')
         this.styleObj = this.styleObj1
         this.pcphonefloatwidth = this.phonefloatwidth
        // this.pcphonefloat = 'top'
      } else {
        console.log('pc端打开')
         this.styleObj = this.styleObj2
          this.pcphonefloatwidth = this.pcfloatwidth
        //  this.pcphonefloat = 'right'
      }
    },

    // 查看流程
       seeProcess(record) {
       //  if (record.auditstatus === '3') {
           // 如果是退回的记录，则显示shbj为1的退回记录
        //   this.scbj = '1'
       //  } else {
           this.scbj = '0'
      //   }
         let params = { id: record.id, scbj: this.scbj, lclx: 'wtlx' }
         getAction(this.url.flowcodelist, params).then((res) => {
           if (res.success) {
             let lis = res.result
            this.col = parseInt(24 / (lis.length))
            console.log(this.col)
             this.todos = lis
           }
         })

         // this.shjllczt(record.id)
         this.draweris = true
       },

    thyjshow(event) {
      console.log(event.target.value)

      if (event.target.value == 1) {
        this.ishows = false
        this.ishows = true
      } else if (event.target.value == 2) {
        this.ishows = true
        this.ishows = false
      }
    },

    add() {
      this.edit({})
    },
      edit(record, bj) {
      // 判断当前用户是否审批完成
 // this.confimsfcfa(record.id, record.sortid)
      if (bj === 'xq') {
        console.log('详情')
        this.isdistrue = true
      } else {
        this.isdistrue = false
      }

      if (bj === 'sp') {
         record.audit_shbj = '1'
         record.sfcfabj = '1'
         record.sftbjirabj = '1'
      }

      // if (record.audit_shbj == '0') {
      //   this.isdistrue = false
      // } else {
      //   this.isdistrue = true
      // }

      this.IsPC()
      this.iscklc = true
      this.seeProcess(record)
      if (record.audit_auditoption == 'null') {
        record.audit_auditoption = ''
      }

      this.form.resetFields()

      this.model = Object.assign({}, record)
      this.visible = true
      console.log(this.model)

      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'titlesummary',
            'project',
            'questiontype',
            'needtype',
            'priority',
            'influenceregion',
            'influenceindustry',
            'questioncontent',
            'poroposername',
            'endtime',
            'collectorname',
            'auditstatus',
            'fileguid',
            'dealstatus',
            'proname',
            'fkuser',
            'fkusersf',
            'audit_shbj',
            'sfcfabj',
            'sftbjirabj',
            'audit_auditoption',
            'realname'

          )
        )
      })
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        let params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },

    // 确认是否需要出方案
    confimsfcfa(record, bj) {
      let params = { tableid: record.id, sortid: record.sortid }
      getAction(this.url.seeendspr, params).then((res) => {
          if (res.success) {
                if (res.result == true) {
                  // 是最后一个审批人
                  this.issfcfa = true
                } else {
                  // 不是最后一个审批人
                    this.issfcfa = false
                }
                this.edit(record, bj)
          }
        })
    },

    // 编辑是否出方案 editsfcjfa
    editsffabj(id, sfcfabj, sftbjirabj, realname) {
      let params = { id: id, sfcfabj: sfcfabj, sftbjirabj: sftbjirabj, realname: realname }
      putAction(this.url.editsfcjfa, params).then((res) => {
          if (res.success) {
                if (res.result == true) {
                  // 是最后一个审批人
                  this.issfcfa = true
                } else {
                  // 不是最后一个审批人
                    this.issfcfa = false
                }
          }
        })
    },

    sbmitsp() {
      console.log('审批')
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          let httpisurl = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let spData = Object.assign(this.model, values)
          if (spData.audit_shbj == '2' && (spData.audit_auditoption == 'undefined' || spData.audit_auditoption == '' || spData.audit_auditoption == null || spData.audit_auditoption == 'null')) {
            that.$message.warning('请填写退回原因！')
            that.confirmLoading = false
            return
          } else if (spData.audit_shbj == '0') {
            that.$message.warning('请选择审批结果！')
            that.confirmLoading = false
            return
          } else if (spData.audit_shbj == '2' && spData.audit_auditoption.length > 199) {
            that.$message.warning('退回原因过长,请简要说明！')
            that.confirmLoading = false
            return
          }
          console.log('表单提交数据', spData)
          console.log('审批数据', spData.audit_id, spData.audit_shbj, spData.audit_auditoption, spData.spyijian)
          if (this.xgnr == false) {
            // 修改
            httpAction(this.url.edit, spData, method)
              .then((res) => {
                if (res.success) {
                  httpisurl = this.url.questionsh
                  var formData = new FormData()
                  formData.append('id', spData.audit_id)
                  formData.append('shbj', spData.audit_shbj)
                  formData.append('auditoption', spData.audit_auditoption)
                  httpAction(httpisurl, formData, method)
                    .then((res) => {
                      if (res.success) {
                        that.$message.success(res.message)
                        that.$emit('ok')
                      } else {
                        that.$message.warning(res.message)
                      }
                    })
                    .finally(() => {
                      that.confirmLoading = false
                    })
                } else {
                  that.confirmLoading = false
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                // that.confirmLoading = false
              })
         // 审核
          } else {
            debugger
            if (this.issfcfa = true) {
              // 是否出具方案和是否同步jira
              this.editsffabj(spData.id, spData.sfcfabj, spData.sftbjirabj, spData.realname)
            }

            httpisurl = this.url.questionsh
            var formData = new FormData()
            formData.append('id', spData.audit_id)
            formData.append('shbj', spData.audit_shbj)
            formData.append('auditoption', spData.audit_auditoption)
             formData.append('spyijian', spData.spyijian)

            httpAction(httpisurl, formData, method)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  // 判断是否最后一个审核来提示是否出方案
                  if (res.result.auditstatus == '2') {
                          this.issfcfa = true
                  } else {
                    this.issfcfa = false
                  }
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
          }
        }
      })
    },

    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          'titlesummary',
          'project',
          'questiontype',
          'needtype',
          'priority',
          'influenceregion',
          'influenceindustry',
          'questioncontent',
          'poroposername',
          'endtime',
          'collectorname',
          'auditstatus',
          'fileguid',
          'dealstatus',
          'proname',
          'fkuser',
          'fkusersf',
          'sfcfabj',
          'realname'
        )
      )
    }
  }
}
</script>
